<template>
  <div class="my-header">
    <div class="inner">
      <h1>TODOLIST</h1>
      <input type="text" v-model="title" @keydown.enter="add" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      this.$emit("add", this.title);
      this.title = "";
      //添加完成清空内容
    },
    //按下回车添加 子传父把添加的内容传到父组件执行添加操作
  },
};
</script>
<style lang="scss" scoped>
.my-header {
  width: 100%;
  height: 50px;
  background: #3c3c3c;
  .inner {
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    input {
      width: 60%;
      height: 30px;
      border-radius: 5px;
      color: #000;
    }
  }
}
</style>
